<template>
    <div class="regulatory-compliance">
        <div class="common-wrap">
            <div class="common-wrap-head">信披合规评分</div>
            <div class="common-wrap-body" style="padding-top:25px;">
                <div class="score-level-wrap">
                    <div class="score-cell">
                        <div class="score-icon">
                            <img src="../../assets/this_company.png"/>
                        </div>
                        <div class="score-content">
                            <p class="score-number">{{ indexScore[0] }}</p>
                            <p class="score-item">本公司</p>
                        </div>
                    </div>
                    <div class="score-cell">
                        <div class="score-icon">
                            <img src="../../assets/this_industry.png"/>
                        </div>
                        <div class="score-content">
                            <p class="score-number">{{ indexScore[1] }}</p>
                            <p class="score-item">行业均值</p>
                        </div>
                    </div>
                    <div class="score-cell">
                        <div class="score-icon">
                            <img src="../../assets/a_average.png"/>
                        </div>
                        <div class="score-content">
                            <p class="score-number">{{ indexScore[2] }}</p>
                            <p class="score-item">A股均值</p>
                        </div>
                    </div>
                </div>

                <div class="index-chart">
                    <canvas id="indexChart"></canvas>
                </div>
            </div>
        </div>

        <div class="common-wrap">
            <div class="common-wrap-head self-wrap-head">
                <span>违规比例</span>
                <div class="self-tab">
                    <div class="self-tab-cell" :class="{'active-tab-cell':vioRateTab===0}" @click="vioRateTab = 0">本行业</div>
                    <div class="self-tab-cell" :class="{'active-tab-cell':vioRateTab===1}" @click="vioRateTab = 1">沪深两市</div>
                </div>
            </div>
            <div class="common-wrap-body">
                <div class="vio-rate-box">
                    <div class="vio-rate-wrap" :class="{'vio-rate-view-right': vioRateTab===1 }">
                        <div class="vio-rate-cell">
                            
                            <div class="vio-rate-card" v-if="compStatShow && chartVisible.pieA">
                                <p class="vio-rate-card-title">
                                    <span class="vio-title-text">本年度信披违规比例</span>
                                    <a class="vio-title-link" href="javascript:void(0)" @click="gotoStatute">更多></a>
                                </p>
                                <div class="pie-chart-wrap">
                                    <canvas id="pieChartA"></canvas>
                                </div>
                            </div>
                            <img src="../../assets/no-data-tip.png" class="no-data-img" alt="" v-else>
                        </div>
                        <div class="vio-rate-cell">
                            
                            <div class="vio-rate-card"  v-if="compStatShow && chartVisible.pieB">
                                <p class="vio-rate-card-title">
                                    <span class="vio-title-text">本年度信披违规比例</span>
                                    <a class="vio-title-link" href="javascript:void(0)" @click="gotoStatute">更多></a>
                                </p>
                                <div class="pie-chart-wrap">
                                    <canvas id="pieChartB"></canvas>
                                </div>
                            </div>

                            <img src="../../assets/no-data-tip.png" class="no-data-img" alt="" v-else>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="common-wrap">
            <div class="common-wrap-head self-wrap-head">
                <span>违规处理方式</span>
                <div class="self-tab">
                    <div class="self-tab-cell" :class="{'active-tab-cell':vioDealTab===0}" @click="vioDealTab = 0">本行业</div>
                    <div class="self-tab-cell" :class="{'active-tab-cell':vioDealTab===1}" @click="vioDealTab = 1">沪深两市</div>
                </div>
            </div>
            <div class="common-wrap-body">
                <div class="vio-rate-box">
                    <div class="vio-rate-wrap" :class="{'vio-rate-view-right': vioDealTab===1 }">
                        <div class="vio-rate-cell">
                            <img src="../../assets/no-data-tip.png" class="no-data-img" alt="" v-if="!compStatShow">
                            <div v-else>
                                <p class="vio-rate-card-title vio-deal-card-title">
                                    <span class="vio-title-text">本年度信披违规处理方式</span>
                                </p>
                                <div class="pie-chart-wrap">
                                    <canvas id="rangeChartA"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="vio-rate-cell">
                            <img src="../../assets/no-data-tip.png" class="no-data-img" alt="" v-if="!compStatShow">
                            <div v-else>
                                <p class="vio-rate-card-title vio-deal-card-title">
                                    <span class="vio-title-text">本年度信披违规处理方式</span>
                                </p>
                                <div class="pie-chart-wrap">
                                    <canvas id="rangeChartB"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="common-wrap">
            <div class="common-wrap-head">证监会处罚要闻</div>
            <div class="common-wrap-body zjhyw-wrap">
                <img src="../../assets/no-data-tip.png" class="no-data-img" alt="" v-if="!punishNewsList.length">
                <ul class="punish-news-list" v-else>
                    <li class="punish-news" v-for="item in punishNewsList">
                        <p class="punish-news-title" @click="gotoDetail(item.id,'zjhyw')">
                            {{ item.title }}
                        </p>
                        <p class="punish-news-msg">
                            <span class="punish-news-source">{{ item.source }}</span>
                            <span class="punish-news-time">{{ item.time }}</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import router from '@/router';
import { getVioRate, getPunishNews, getLetterWear } from '@/api/data';
import { Icon } from 'vant';
import IngotCookie from '@/core/utils/cookie';
import { BASIC_URL } from '@/core/config';
import { mapGetters, mapActions } from 'vuex';

Vue.use(Icon);

export default {
    name: 'RegulatoryCompliance',
    data() { 
        return {
            indexScore:[0,0,0],
            punishNewsList:[],
            vioRateTab:0,
            vioDealTab:0,
            compStatShow:true,
            chartVisible:{
                pieA: false,
                pieB: false,
                barA: false,
                barB: false
            }
        }
    },
    mounted() {
        this.getIndexChart();
        this.getCompStatData();
        this.getPunishNewsData();
    },
    methods: {
        ...mapActions([
          'ac_gotoDetail'
        ]),
        gotoDetail(id,api_type){
          this.ac_gotoDetail({ id, api_type });
        },
        getIndexChart() {
            let keyArr = ['company','industry','all'];
            getLetterWear().then(res => {
                let oriData = res.data;
                let data = [];

                for(var _key in oriData){
                    if(_key !== 'time'){
                        let _type = _key === 'company' ? '本公司' : _key === 'industry' ? '行业均值' : 'A股公司均值';
                        this.indexScore[keyArr.indexOf(_key)] = oriData[_key][oriData[_key].length-1];
                        oriData[_key].forEach((obj,ind) => {
                            let cellData = {
                                y: obj,
                                name: _type,
                                x: oriData.time[ind]
                            }
                            data.push(cellData);
                        });
                    }
                }

                let minNum = 0;
                data.forEach((obj,ind) =>{
                    if(ind === 0){
                        minNum = obj.y;
                    } else {
                        minNum = obj.y < minNum ? obj.y : minNum;
                    }
                });
                var chart = new this.$F2.Chart({
                    id: 'indexChart',
                    pixelRatio: window.devicePixelRatio,
                    padding:[30,17,30,22]
                });
                chart.legend(false);
                chart.source(data);
                chart.tooltip({
                    showTitle: false,
                    layout: 'vertical',
                    offsetY: 48, // y 方向的偏移
                    showCrosshairs: true
                });
                chart.scale({
                    x: {
                        range: [0, 1]
                    },
                    y: {
                        min: minNum
                    }
                });
                chart.axis('y', {
                    grid: {
                        lineDash: null,
                        stroke: '#e8e8e8',
                        lineWidth: 1
                    }
                });
                chart.axis('x',{
                    grid: {
                        lineDash: null,
                        stroke: '#e8e8e8',
                        lineWidth: 1
                    }
                });
                chart.area().position('x*y').color('name*y', (item, y) => { //多个参数，通过回调函数
                    if (item === '本公司') {
                      return 'l(90) 0:#577DF5 1:#f7f7f7';
                    }
                    return 'rgba(0,0,0,0)';
                });
                chart.line().position('x*y').color('name',['#577DF5','#9B68F9','#F2C368']);
                // console.log(data);
                chart.render();
            }).catch(err => {
                console.log(err);
            });



            // getUpdateOption({
            //     api_type:'app'
            // }).then((res) => {
            //     this.indexScore = res.data.index;
                
            // }).catch((err) => {
            //     console.log(err);
            // });
        },
        getCompStatData() {
            getVioRate().then((res) => {
                console.log(res);
                if(res.code === 0){
                    if(res.data.industry_content && res.data.industry_content.total){
                        this.chartVisible.pieA = true;
                        setTimeout(() => {this.getPieChart(res.data.industry_content.data,'pieChartA',res.data.industry_content.total)},400);
                    }
                    if(res.data.deal_content && res.data.deal_content.total){
                        this.chartVisible.pieB = true;
                        setTimeout(() => {this.getPieChart(res.data.deal_content.data,'pieChartB',res.data.deal_content.total)},400);
                    }

                    if(res.data.industry_type && res.data.industry_type.total){
                        this.chartVisible.barA = true;
                        setTimeout(() => {this.getRangeColumnChart(res.data.industry_type.data,'rangeChartA',res.data.industry_type.total)},400);
                    }
                    if(res.data.deal_type && res.data.deal_type.total){
                        this.chartVisible.barB = true;
                        setTimeout(() => {this.getRangeColumnChart(res.data.deal_type.data,'rangeChartB',res.data.deal_type.total)},400); 
                    }
                } else {
                    this.compStatShow = false;
                }
                
                
                
                
            })
            .catch((err) => {
                this.compStatShow = false;
                console.log(err);
            });
        },
        gotoStatute() {
            // this.$router.push('/interact')
            let r = BASIC_URL+"statute?from=dataInfo";
            if(IngotCookie.get('source')=='ios'){
                // console.log(IngotCookie.get('source'))
                window.webkit.messageHandlers.NoticeLinkEHDJumpMore.postMessage('法规_'+r);
            }else if(IngotCookie.get('source')=='android'){
                // console.log(IngotCookie.get('source'))
                window.AndroidWebView.NoticeLinkEHDJumpMore("true", r,'法规');
            }
        },
        getPunishNewsData() {
            getPunishNews({
                page_num:1,
                page_size:15
            }).then((res) => {
                this.punishNewsList = res.data.data_list;
            }).catch((err) => {
                console.log(err);
            })
        },
        getPieChart(_data,_id,totalCount){
            let data = _data;
            let colorGroup = ['#EF6E46','#577DF5','#9B80DF','#68CAA8','#E8C185','#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'];
            data.forEach((obj,index) =>{
                obj.ratio = obj.value / totalCount;
                obj.const = 'const';
                obj.color = colorGroup[index];
            });

            var chart = new this.$F2.Chart({
                id: _id,
                pixelRatio: window.devicePixelRatio
            });

            chart.source(data);
            chart.coord('polar', {
                transposed: true,
                innerRadius: 0.6,
                radius: 0.75
            });
            chart.axis(false);
            chart.legend(false);
            chart.tooltip(false);
            chart.guide().html({
                position: ['50%', '48%'],
                html: '<div style="width: 100px;height: 20px;text-align: center;line-height: 20px;" id="textContent"><p style="margin:0;color:#222;font-size:30px;">'+totalCount+'</p><p style="margin:0;color:#757679;font-size:15px;">总计</p></div>'
            });
            // 配置文本饼图
            
            
            chart.pieLabel({
                sidePadding: 0,
                label2OffsetY:-24,
                label1: function label1(data) {
                    return {
                        text: data.name,
                        fill: '#808080'
                    };
                },
                label2: function label2(data) {
                    return {
                        fill: data.color,
                        text: parseInt(data.value),
                        fontWeight: 500,
                        fontSize: 10
                    };
                }
            });
            
            chart.interval().position('const*ratio').color('name', ['#EF6E46','#577DF5','#9B80DF','#68CAA8','#E8C185','#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273']).adjust('stack').style({
                lineWidth:data.length>1?1:0,
                stroke: '#fff'
              });
            chart.render();
        },
        getRangeColumnChart(_data,_id,totalCount){
            let data = _data;
            let _count = totalCount;
            data.forEach((obj,ind) =>{
                obj.name = obj.name.length > 2 ? obj.name.replace(/[^\x00-\xff]/g,"$&\x01").replace(/.{3}\x01?/g,"$&\n").replace(/\x01/g,"") : obj.name;
                let ori_count = _count;
                _count = _count-obj.value;
                obj.range = [_count,ori_count];
            });
            data.unshift({
                name:'总数',
                range:[0,totalCount],
                value:totalCount
            });
            var chart = new this.$F2.Chart({
                id: _id,
                pixelRatio: window.devicePixelRatio
            });
            chart.source(data, {
                y: {
                    tickCount: 5
                }
            });
            chart.tooltip({
                showItemMarker: false,
                onShow: function onShow(ev) {
                    var items = ev.items;
                    items[0].value = items[0].origin.value;
                }
            });

            data.map(function(obj) {
                chart.guide().text({
                    position: [obj.name, obj.range[1]],
                    content: obj.value,
                    style: {
                    },
                    offsetY: -10
                });
            });
            chart.legend(false);
            chart.interval().position('name*range').color('name','#D4B686').animate({
                appear: {
                    animation: 'shapesScaleInY'
                }
            });
            chart.render();
        }
    }
};
</script>

<style>
.regulatory-compliance .common-wrap-body{
    padding-top:0;
    padding-bottom: 0;
}
.score-level-wrap{
    height:45px;
    box-sizing: border-box;
    padding:0 0 10px;
    display: flex;
}
.score-level-wrap .score-cell{
    flex:1;
    display: flex;
}
.self-wrap-head{
    position: relative;
}
.self-tab{
    position: absolute;
    right: 0;
    top:0;
    display: flex;
}
.score-icon{
    width: 35px;
    height: 35px;
    /*background-color: #E3EAFE;*/
    border-radius: 100%;
    text-align: center;
    line-height: 35px;
    margin-right: 7px;
}
.score-icon img{
    line-height: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.score-content{
    flex:1;
    text-align: left;
    padding-top: 2px;
}
.score-content p{
    margin:0;
    line-height: 1em;
}
.score-content p.score-number{
    font-size:15px;
    color:#292A3A;
    font-weight: bold;
    margin-bottom: 3px;
}
.score-content p.score-item{
    font-size:13px;
    color:#292A3A;
    font-weight: lighter;
}
#indexChart{
    width: 100%;
    height:260px;
}
.punish-news-list .punish-news{
    padding:13px 0 15px 23px;
    border-bottom: 1px solid #EAEAEA;
    position: relative;
}
.punish-news-list .punish-news:before{
    content: '';
    position: absolute;
    width:5px;
    height: 5px;
    border-radius: 5px;
    background-color: #E4D6C0;
    top:20px;
    left:9px;
}
.punish-news-list .punish-news:last-child{
    border-bottom: none;
}
.punish-news-list .punish-news .punish-news-title{
    color:#222;
    font-size: 14px;
    line-height: 21px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin:0;
}
.punish-news-list .punish-news .punish-news-msg{
    margin:12px 0 0;
    font-size: 12px;
    line-height: 1em; 
}
.punish-news-msg .punish-news-source{
    color:#757679;
    margin-right: 25px;
}
.punish-news-msg .punish-news-time{
    color:#BCBCBC;
}
.vio-rate-card{
    /*height: 280px;*/
    margin:15px 8px;
    -webkit-box-shadow: 0 0 8px 4px rgba(0,0,0,0.05);
    box-shadow: 0 0 8px 4px rgba(0,0,0,0.05);
    border-radius: 10px;
    box-sizing: border-box;
    padding:15px;
}
.vio-rate-card-title{
    line-height: 16px;
    display: flex;
    justify-content: space-between;
    margin:0;
}
.vio-deal-card-title{
    margin:10px 0;
}
.vio-rate-card-title .vio-title-text{
    color:#222;
    font-size:14px;
}
.vio-rate-card-title .vio-title-text:before{
    content: '';
    color:#D4B686;
    background-color: #D4B686;
    width:5px;
    height: 5px;
    border-radius: 100%;
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-1px);
    margin-right: 5px;
}
.vio-rate-card-title .vio-title-link{
    color:#757679;
    font-size: 12px;
}
.pie-chart-wrap{
    height: 250px;
}
.pie-chart-wrap canvas{
    height: 100%;
    width: 100%;
}
.vio-rate-cell .no-data-img,.zjhyw-wrap .no-data-img{
    width:70%;
    margin:30px auto;
    display: block;
}
</style>